<template>
  <div>
    <h1 v-if="!route">添加系统积分</h1>
    <h1 v-else>修改系统积分</h1>
    <hr />
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="200px"
      class="demo-ruleForm"
    >
      <el-form-item label="系统积分名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入系统积分名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="发放方式" prop="giveType">
        <el-select v-model="ruleForm.giveType" placeholder="请选择发放方式">
          <el-option
            v-for="itemT in giveType"
            :key="itemT.value"
            :label="itemT.label"
            :value="itemT.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="系统积分领取方式" prop="colType">
        <el-select v-model="ruleForm.colType">
          <el-option
            v-for="itemC in colType"
            :key="itemC.value"
            :label="itemC.label"
            :value="itemC.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="系统积分数量" prop="number">
        <el-input
          v-model="ruleForm.number"
          placeholder="请输入系统积分数量"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        colType: "",
        giveType: "",
        number: "",
      },
      route: this.$route.query.row,
      //发放方式
      giveType: [
        {
          value: 1,
          label: "系统发放",
        },
        {
          value: 2,
          label: "公司举行活动发放",
        },
        {
          value: 3,
          label: "第三方",
        },
      ],
      //领取方式
      colType: [
        {
          value: 1,
          label: "系统发放",
        },
        {
          value: 2,
          label: "公司举行活动发放",
        },
        {
          value: 3,
          label: "第三方",
        },
      ],
      //验证规则
      rules: {
        name: [{ required: true, message: "请输入积分名称", trigger: "blur" }],
        colType: [
          { required: true, message: "请选择领取方式", trigger: "change" },
        ],
        giveType: [
          { required: true, message: "请选择发布方式", trigger: "change" },
        ],
        number: [
          { required: true, message: "请填写积分数量", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.route) {
            this.$http({
              url: "/systempoint/addSystempoint",
              method: "POST",
              data: {
                colType: this.ruleForm.colType,
                giveType: this.ruleForm.giveType,
                name: this.ruleForm.name,
                number: this.ruleForm.number,
              },
            })
              .then((res) => {
                console.log("请求成功：", res);
                this.$router.push("/cpscore/score/sysscore");
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              })
              .catch((err) => {
                console.log("请求失败：", err);
              });
          }else {
            this.$http({
              url: '/systempoint/updateSystemPoint',
              method: 'POST',
              data: {
                id: this.$route.query.row.id,
                colType: this.ruleForm.colType,
                giveType: this.ruleForm.giveType,
                name: this.ruleForm.name,
                number: this.ruleForm.number,
              }
            })
            .then((res) => {
                console.log("请求成功：", res);
                this.$router.push("/cpscore/score/sysscore");
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              })
              .catch((err) => {
                console.log("请求失败：", err);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //取消
    cancel() {
      this.$router.push("/cpscore/score/sysscore");
    },
    //编辑某一个查询赋值
    giveInfo() {
      this.$http({
        url: "/systempoint/selectById",
        method: "POST",
        params: {
          id: this.$route.query.row.id,
        },
      })
        .then((res) => {
          console.log("请求成功：", res);
          let systemPointsEmit = res.data.data;

          this.ruleForm.colType = systemPointsEmit.colType;
          this.ruleForm.giveType = systemPointsEmit.giveType;
          this.ruleForm.name = systemPointsEmit.name;
          this.ruleForm.number = systemPointsEmit.number;
        })
        .catch((err) => {
          console.log("请求失败：", err);
        });
    },
  },
  created() {
    if(this.route) {
      this.giveInfo();
    }
  }
};
</script>

<style lang="scss" scoped>
hr {
  margin: 15px 0;
}

.el-input {
  width: 300px;
}
</style>